<template>
  <div>
    <div v-for="(friend, index) in friendList" :key="index" @click="goToChatPage(friend)" class="friend-item">
      <img :src="baseImageUrl+friend.photo" class="avatar" :style="{ marginRight: friend.unreadCount > 0 ? '10px' : '10px' }">
      <div class="friend-details">
        <div class="top-row">
          <span class="username">{{ friend.homestayname }}</span>
          <span class="last-message-time">{{ formatMessageTime(friend.lastChatTime) }}</span>
        </div>
        <span v-if="friend.lastChatContent" class="last-message">
          {{ truncateMessage(friend.lastChatContent) }}
          <span v-if="friend.unreadCount > 0" class="unread-badge">{{ friend.unreadCount }}</span>
        </span>
      </div>
    </div>
	<bottom-nav></bottom-nav>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; // 引入中文语言包
dayjs.locale('zh-cn'); // 设置 dayjs 使用中文语言包

export default {
  data() {
    return {
      friendList: [], // 存放好友列表数据
	  baseImageUrl: 'http://localhost:8086/business/common2/download?name=', // 后端图片的基础路径
    };
  },
 
  onLoad() {
  	this.getMyFrindsList()
  },
 
  methods: {
    goToChatPage(friend) {
      // 点击好友后跳转至聊天页面
      // 示例代码，实际根据项目需求进行跳转
	  console.log("好友信息为")
	  console.log(friend)
	   uni.navigateTo({
	          url: `/pages/chat/chat?friendId=${friend.friendId}&friendName=${friend.homestayname}&homestayId=${friend.homestayId}&photo=${friend.photo}`
	        });
    },
    formatMessageTime(time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm'); // 只显示日期，不显示星期几
    },
    truncateMessage(message) {
      if (message.length > 20) {
        return message.substring(0, 15) + '...'; // 只显示前20个字符，并加上省略号
      } else {
        return message;
      }
    },
	getMyFrindsList(){
		var userid = uni.getStorageSync('login-user').userId;
		var token=uni.getStorageSync('login-user').token;
		uni.request({
			url:'http://localhost:8086/business/user/chatContent/mySellers?userid='+userid,
			method:'GET',
			header:{
				"token":token,
			},
			success:(res)=>{
				console.log(res.data.data);
				this.friendList=res.data.data;
			},
			fail(){
				alert("请求出错")
				
			},
		})
		
		
	}
  }
};
</script>

<style>
.friend-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.friend-details {
  flex: 1;
}

.username {
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.last-message-time {
  color: #999;
  font-size: 12px;
}

.last-message {
  color: #666;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex; /* 将最后一条消息的文本和未读消息图标放在同一行 */
  justify-content: space-between; /* 将文本和未读消息图标分开对齐 */
}

.unread-badge {
  font-size: 12px;
  color: #fff;
  background-color: #f56c6c;
  padding: 3px 8px;
  border-radius: 10px;
}
</style>